
<template>
	<!-- 食谱管理 -->
	<main-box>
		<div v-if="selectPanel!==3">
			<el-row :gutter="30">
				<el-col :span="3">
					<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==1?'color:#333333;font-weight:bold;':''"
					@click="selectPanel=1">一周食谱</el-button>
				</el-col>
				<el-col :span="3">
					<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==2?'color:#333333;font-weight:bold;':''"
					@click="selectPanel=2">餐点类型</el-button>
				</el-col>
			</el-row>
			<!-- 一周食谱 -->
			<div v-if="selectPanel==1">
				<recipesWeek ref="recipesWeek" @visibleDaily="visibleDaily"></recipesWeek>
			</div>
			<!-- 餐点类型 -->
			<div v-else-if="selectPanel==2">
				<recipesType ref="recipesType"></recipesType>
			</div>
		</div>
		<div v-else>
			<recipesDaily ref="recipesDaily" @visibleDaily="visibleDaily"></recipesDaily>
		</div>
		
	</main-box>
</template>

<script>
	import recipesWeek from './common/recipes_week'
	import recipesDaily from './common/recipes_daily'
	import recipesType from './common/recipes_type'
	export default{
		components:{recipesWeek,recipesDaily,recipesType},
		data(){
			return {
				selectPanel:1,
			}
		},
		methods:{
			campusChange : function(campusId) { //校区改变
				let refName=['','recipesWeek','recipesType','recipesDaily'];
				this.$refs[refName[this.selectPanel]].campusChange(campusId);
			},
			visibleDaily(val){
				this.selectPanel=val;
			}
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	


	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>